<template>
	<div class="main-1" :class="transparent ? 'on' : ''" :style="'padding-top: ' + statusBarHeight + 'px;'">
		<div class="warp">
			<div class="back" v-if="!mode || mode === 'normal'" @click="goBack">
				<image v-if="!transparent" class="back_img" src="/static/icon/arrows.png" alt="">
					<image v-if="transparent" class="back_img" src="/static/icon/white_arrows.png" alt="">
			</div>
			<div class="left-title" v-if="leftTitle">{{ leftTitle }}
			</div>
			<div class="left-icon" v-if="mode === 'leftIcon'" @click.stop="handlerLeftClick">

				<image :src="leftIcon" :class="{
						point: isLeftIconPoint
					}" />
			</div>
			<div class="left-text" :class="active ? 'in' : ''" v-if="mode === 'leftText'"
				@click.stop="handlerLeftClick">
				{{leftText}}
			</div>
			<div class="select-city" v-if="mode === 'select-city'" @click="handlerSelectCity">
				<div class="warp">
					<div class="city">{{ currentCity }}</div>
					<image v-if="!transparent" src="../static/icons/arrowdown.png" alt="" />
					<image v-if="transparent" src="../static/icons/arrowdown.png" alt="" />
				</div>
			</div>
			<div class="title" v-if="!middleTag || middleTag === 'normal'" :class="active ? 'in' : ''">{{ title }}</div>
			<picker class="title-picker" v-if="middleTag === 'picker'" :mode="middlePickerMode" :range="middleRange"
				:range-key="middleRangeKey" :value="middlePickerValue" @change="handlerChange">
				<div class="warp">
					<div class="txt">{{ title }}</div>
					<image class="arrow" src="../static/icon/arrowdown2.png" alt="" />
				</div>
			</picker>
			<button :style="platform == 'WEIXIN'?'right:'+ (wxMenuButtonWidth+15)+'px':''" open-type='share'
				class="right-icon" v-if="rightType === 'icon'" @click.stop="handlerClick">
				<image :style="iconStyle" :src="rightIcon" alt="" />
			</button>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: () => {
					return '';
				}
			},
			mode: String,
			leftText: String,
			leftTitle: {
				type: String,
				default: () => {
					return '';
				}
			},
			rightType: {
				type: String,
				default: () => {
					return '';
				}
			},
			rightIcon: {
				type: String,
				default: () => {
					return '';
				}
			},
			transparent: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			active: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			iconStyle: {
				type: String,
				default: () => {
					return '';
				}
			},
			//写法一
			leftIcon: String,
			//写法二
			// leftIcon: {
			// 	type: String,
			// 	default: () => {
			// 		return '';
			// 	}
			// },
			leftIconStyle: {
				type: String,
				default: () => {
					return '';
				}
			},
			isLeftIconPoint: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			middleTag: {
				type: String,
				default: () => {
					return '';
				}
			},
			middleRange: {
				type: Array,
				default: () => {
					return [];
				}
			},
			middleRangeKey: {
				type: String,
				default: () => {
					return '';
				}
			},
			middlePickerValue: {},
			middlePickerMode: {
				type: String,
				default: () => {
					return 'selector';
				}
			},
			currentCity: {
				type: String,
				default: () => {
					return '深圳市';
				}
			},
			isCustomBack: {
				type: Boolean,
				default: () => {
					return false;
				}
			}
		},
		mounted() {},
		methods: {
			goBack() {
				//处理兼容，如果没有上一级界面则返回首页
				if (this.isCustomBack) {
					this.$emit('back');
					return false
				}

				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			handlerClick() {
				this.$emit('rightClick', 1);
			},
			handlerSelectCity() {
				this.$emit('handlerSelectCity', 1)
			},
			handlerChange(e) {
				this.$emit('pickerChange', e.detail.value);
			},
			handlerLeftClick() {
				this.$emit('leftClick', 1)
			}
		},
		computed: {
			...mapState(['statusBarHeight', 'platform', 'wxMenuButtonWidth'])
		}
	};
</script>

<style scoped lang="scss">
	.main-1 {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		.warp {
			width: 100%;
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 0;

			.title {
				font-size: 30rpx;
				color: #0C0D0D;
				font-weight: 500;
				line-height: 1;
			}

			.left-title {
				font-size: 30rpx;
				color: #0C0D0D;
				font-weight: 500;
				line-height: 1;
				position: absolute;
				top: 50%;
				left: 80rpx;
				transform: translateY(-50%);
			}

			.title-picker {
				font-size: 0;

				.warp {
					display: flex;
					align-items: center;
					justify-content: center;

					.txt {
						font-size: 36rpx;
						color: #0C0D0D;
						font-weight: 500;
						line-height: 1;
					}

					image {
						width: 28upx;
						height: 16upx;
					}
				}
			}

			.back {
				position: absolute;
				left: 0upx;
				font-size: 14px;
				line-height: 1;
				color: #999;
				z-index: 6;
				top: 50%;
				transform: translateY(-50%);

				.back_img {
					width: 48upx;
					height: 48upx;
					padding: 14upx 30upx 10upx 14upx;

				}
			}

			.left-icon {
				position: absolute;
				left: 30upx;
				font-size: 0;
				z-index: 6;
				width: 44upx;
				height: 44upx;

				// padding-left: 10upx;
				image {
					width: 100%;
					height: 100%;
				}

				.point {
					&:after {
						content: '';
						position: absolute;
						right: -6upx;
						top: -6upx;
						width: 12upx;
						height: 12upx;
						border-radius: 50%;
						background: #ff0000;
					}
				}
			}

			.left-text {
				font-size: 32upx;
				line-height: 44px;
				color: #000000;
				position: absolute;
				left: 0;
				padding-left: 30upx;
			}

			.select-city {
				position: absolute;
				left: 20upx;
				font-size: 14px;
				line-height: 1;
				top: 50%;
				margin-top: -7px;
				color: #999;
				z-index: 6;
				height: 14px;

				.warp {
					display: flex;
					align-items: center;
					font-size: 0;
					height: 100%;

					.city {
						font-size: 14px;
						line-height: 1;
						color: #2497FF;
						padding-right: 14upx;
					}

					image {
						width: 12px;
						height: 6px;
					}
				}
			}

			.right-icon {
				position: absolute;
				right: 30upx;
				top: 50%;
				width: 46upx;
				height: 46upx;
				font-size: 0;
				transform: translateY(-50%);
				background: transparent;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.on {
		border-bottom: none;
		background: transparent;

		.title {
			color: #fff !important;
		}

		.back {
			color: #fff !important;
		}

		.select-city {
			.warp {
				.city {
					color: #fff !important;
				}
			}
		}
	}

	.in {
		color: #fff !important;
	}
</style>